<template>
  <!-- 收货地址 -->
  <van-contact-card type="edit" :name="address.consignee" :tel="`${address.mobile} ${address.region_text} ${address.address}`" :editable="false" />

  <!-- 商品卡片 -->
  <van-card
    v-for="(item,key) in product"
    :title="item.product.name"
    :thumb="item.product.thumbs_text"
    :num="item.pronum"
  >
    <template #title>
      <div class="title">{{item.product.name}}</div>
    </template>

          <!-- 卡片的插槽部分  -->
    <template #desc v-if="item.attrs">
      <van-tag v-for="(val,key) in item.attrs" :key="key" class="tag" type="primary">{{val.value}}</van-tag>
    </template>
    <template #desc v-else>
      <van-tag class="tag" type="danger">无规格数据</van-tag>
    </template>

    <template #tags>
      <div class="price">单价：￥{{ item.price }}</div>
    </template>

    <template #price>
      <div class="price">合计：￥{{ item.total}}</div>
    </template>
  </van-card>

  <!-- 订单信息 -->
  <van-cell title="订单号" :value="order.code" />
  <van-cell title="订单总价" :value="order.amount" />
  <van-cell title="支付方式" :value="order.pay_text" />
  <van-cell title="订单状态" :value="order.status_text" />
  <van-cell title="优惠金额" :value="order.amount_rate" />
  <van-cell title="下单时间" :value="order.createtime_text" />
  <van-cell title="订单描述" :value="order.remark" />

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="primary" size="large">在线客服</van-button>
    <van-button square hairline type="danger" size="large">申请退款</van-button>
  </div>
</template>
<script setup>
  const {proxy} = getCurrentInstance()

  let orderid = proxy.$route.query.orderid ? proxy.$route.query.orderid : 0;
  let product = ref([])
  let address = ref([])
  let order = ref([])
  // 挂载
  onMounted(()=>{
    window.addEventListener('popstate',Back)
    OrderInfo()
  })
  const Back = ()=>{
    window.removeEventListener('popstate',Back)
    proxy.$router.push('/order')
  }
  const OrderInfo = async () =>{
    //封装数据
    var result = await proxy.$POST({
      url:'/order/info',
      params:{orderid:orderid,busid:proxy.$business.value.id}
    })
    if(result.code == 0){
      proxy.$fail(result.msg)
      return false
    }
    console.log(result.data.address)
    //返回3个值
    //开始赋值
    address.value = result.data.address;
    product.value = result.data.product;
    order.value = result.data.order;
    result.data.product.map((item)=>item.attrs = JSON.parse(item.attrs))
    return false
  }
</script>

<style scoped>
  @import url('/assets/css/OrderInfo.css');
</style>
<style>
  .OrderCode{
    word-wrap: normal;
  }
</style>